<template>
    <div class="homeindex-all">
      <!-- 轮播图 -->
        <div class="swiper-section">
            <div class="swipe-wrapper">
                <mt-swipe ref="swiperComponent" :auto="4000">
                    <mt-swipe-item v-for="site in topData">
                        <my-image class="my-img" :imgUrl="soursePath+site.icon" @click.native="clickDetailsHandle(site)"></my-image>
                    </mt-swipe-item>
                </mt-swipe>
            </div>
        </div>
        <!-- 品牌故事 -->
        <div class="class_title brand"><span class="class-name">品牌故事</span></div>
        <div class="brand-div">
          <my-image class="my-img" :imgUrl="soursePath+storeInfo.icon"></my-image>
        </div>
        <div class="store-info">
            <p class="store-name">{{storeInfo.message}}</p>
        </div>
        <!-- 最新优惠 -->
        <div class="class_title"><span class="class-name">最新优惠</span></div>
        <ul class="new-activity">
          <router-link tag="li" v-for="cellData in activityData" :to=" 'details/' + cellData.goodsid">
            <my-image class="my-img" :imgUrl="soursePath+cellData.icon"></my-image>
            <div class="activity-info">
              <div class="activity-name">{{cellData.gname}}</div>
              <div class="info-right">
                <span class="symbol">&yen;</span><span class="price">{{cellData.price}}元</span>
              </div>
            </div>
          </router-link>
        </ul>
        <!-- 优秀职工 -->
        <div class="class_title"><span class="class-name">优秀职工</span></div>
        <ul class="staff-list">
            <router-link tag="li" :to="{path:'/masterHome',query: {tabIndex: 1}}" v-for="cellData in staffArr" :class="[{'disTop':cellData.disTop}]">
                <my-image class="my-img" :imgUrl="cellData.imgUrl"></my-image>
                <div class="content">
                    <div class="content-info">
                      <p class="content-item">姓名：{{cellData.name}}</p>
                      <p class="content-item">职务：{{cellData.job}}</p>
                      <p class="content-item">经验：{{cellData.exp}}年</p>
                    </div>
                </div>
            </router-link>
        </ul>
        <!-- 联系我们 -->
        <div class="class_title"><span class="class-name">联系我们</span></div>
        <div class="contact-us">
          <div class="left">
            <div class="left-top">
              <p class="contact-item">地址：</p>
              <p class="contact-item address">{{storeInfo.address}}</p>
              <!-- <p class="contact-item">脉山龙大厦2栋506室</p> -->
            </div>
            <div class="left-bottom">
              <p class="contact-item">电话：</p>
              <p class="contact-item phone">{{storeInfo.phone}}</p>
              <!-- <p class="contact-item">15001998521</p> -->
            </div>
          </div>
          <div class="right">
            <my-image class="my-img" :imgUrl="soursePath+storeInfo.qrcode"></my-image>
          </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { Swipe, SwipeItem } from "mint-ui";
import Vue from "vue";
import "mint-ui/lib/swipe/style.css";
import "mint-ui/lib/swipe-item/style.css";
import myImage from "../lazyloadImg/lazyImage.vue";

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

export default {
  name: "v-homeindex",
  data() {
    return {
      topData: [],
      activityData: [],
      jobConfig: null,
      staffArr: []
    };
  },
  mounted() {
    this.LoadDb();
  },
  components: { myImage },
  methods: {
    clickDetailsHandle(objs) {
      this.$router.push({ path: "details/" + objs.goodsid });
    },
    LoadDb() {
      this.$http
        .post(this.path + "store/Store/storeindex", {
          storeid: this.storeid
        })
        .then(response => {
          if (response.body.status == "ok") {
            let adinfo = response.body.result.adinfo;
            for (let imgItem of adinfo) {
              if (imgItem.atype.toString() == "1") this.topData.push(imgItem);
              else if (imgItem.atype.toString() == "5") this.activityData.push(imgItem);
            }
            this.initJobConfig(response.body.result.brole);
            
            for (let masterIndex = 0;masterIndex < response.body.result.blist.length;masterIndex++) {
              let serverStaffItem=response.body.result.blist[masterIndex];
              this.staffArr.push({
                id: serverStaffItem.beautician_id,
                imgUrl:this.soursePath+serverStaffItem.icon,
                name: serverStaffItem.name,
                job: this.jobConfig[serverStaffItem.role],
                dec: serverStaffItem.message,
                exp: serverStaffItem.exp,
                disTop:masterIndex>1
              });
            }
          }
        })
        .catch(response => {});
    },
    initJobConfig(originalData) {
      this.jobConfig = {};
      originalData.forEach((val, index, arr) => {
        this.jobConfig[val.id] = val.rolename;
      });
    }
  },
  computed: {
    ...mapState([
      "path",
      'soursePath',
      "icon",
      "storeid",
      "loadingShow",
      "phoneno",
      "storeInfo"
    ])
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/css/mixin.styl';

.homeindex-all {
  padding-bottom: 0.56rem;
  font-family: 'Microsoft YaHei';

  .my-img {
    background-color: #f1f1f1;
    width: 100%;
    height: 100%;
  }

  .swiper-section {
    width: 100%;

    .swipe-wrapper {
      .mint-swipe {
        width: 3.2rem;
        height: 1.6rem;

        .mint-swipe-indicators {
          bottom: 0.06rem;

          .mint-swipe-indicator {
            background-color: #fff;
            margin: 0 0.05rem;
            opacity: 0.4;
          }

          .mint-swipe-indicator.is-active {
            background-color: #fff;
            opacity: 0.9;
          }
        }
      }
    }
  }

  .class_title {
    position: relative;
    background: url('../../assets/class_bg.png') no-repeat;
    background-size: 100%;
    height: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;

    // border-bottom-1px(#fad9e0);
    &.brand {
      box-shadow: 0 1px 0 rgba(236, 118, 154, 0.3);
    }

    .class-name {
      // font-family "Microsoft JhengHei";
      // font-weight 700;
      color: #f2a5ba;
      font-size: 0.15rem;
      letter-spacing: 0.01rem;
    }
  }

  .brand-div {
    width: 100%;
    height: 1.6rem;

    .my-img {
      background-color: #fff;
    }
  }

  .store-info {
    padding: 0.24rem 0.12rem 0.48rem 0.12rem;
    background-color: #f8cbd6;
    box-sizing: border-box;

    .store-name {
      text-indent: 0.2rem;
      font-size: 0.13rem;
      line-height: 0.19rem;
      color: #727171;
    }
  }

  .new-activity {
    width: 100%;

    li {
      width: 100%;
      list-style: none;
      height: 1.92rem;
      position: relative;
    }

    .my-img {
      background-color: #fff;
    }

    .activity-info {
      width: 100%;
      height: 0.4rem;
      position: absolute;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.6);
      box-sizing: border-box;
      padding: 0 0.22rem 0 0.14rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .activity-name {
        color: #fff;
        font-size: 0.14rem;
        letter-spacing: 0.01rem;
      }

      .info-right {
        position: relative;
        top: 0.01rem;
        color: #e61874;

        .symbol {
          font-size: 0.13rem;
          margin-right: 0.02rem;
        }

        .price {
          font-size: 0.15rem;
        }
      }
    }
  }

  .staff-list {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    margin: 0 0.15rem;
    font-size: 0;

    li {
      width: 100%;
      flex: 0 1 1.4rem;
      background-color: #f6f7f7;

      &.disTop {
        margin-top: 0.06rem;
      }

      .my-img {
        width: 1.4rem;
        height: 1.4rem;
      }

      .content {
        height: 0.6rem;
        display: flex;
        align-items: center;

        .content-info {
          padding-left: 0.1rem;

          .content-item {
            font-size: 0.13rem;
            line-height: 0.17rem;
            color: #595656;
            letter-spacing: 0.01rem;
          }
        }
      }
    }
  }

  .contact-us {
    margin: 0 0.1rem;
    box-sizing: border-box;
    background-color: #dcdddd;
    height: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      padding:0 0.14rem; 

      .left-top {
        .address{
          margin-top 0.02rem;
        }
      }

      .left-bottom {
        margin-top: 0.09rem;
        .phone{
          margin-top 0.01rem;
        }
      }

      .contact-item {
        color: #595656;
        font-size: 0.13rem;
        line-height: 0.18rem;
      }
    }

    .right {
      margin-right: 0.06rem;

      .my-img {
        width: 1.18rem;
        height: 1.18rem;
      }
    }
  }
}
</style>
